<template>
  <div :id="eId" style="width: 100%; height: 100%"></div>
</template>

<script>
import * as echarts from "echarts";
import axios from "axios";
export default {
  name: "LineEchartxy",
  props: {
    dataSource: {
      type: Object,
      default() {
        return {
          title:"总节电",//总标题
          name:"总节电",//图例名称（鼠标移入最上面一行展示的内容）
          // 数据源
          data: [
                { name: "石家庄市", value: 20057.34 },
                { name: "邢台市", value: 15477.48 },
                { name: "邯郸市", value: 31686.1 },
                { name: "保定市", value: 6992.6 },
                { name: "张家口市", value: 44045.49 },
                { name: "衡水市", value: 40689.64 },
                { name: "承德市", value: 37659.78 },
                { name: "秦皇岛市", value: 45180.97 },
                { name: "唐山市", value: 55204.26 },
                { name: "廊坊市", value: 21900.9 },
                { name: "沧州市", value: 4918.26 },
              ],
          colors: ["#fff", "#00ff00"]//颜色渐变，从低到高
        };
      },
    },
    eId: {
      type: String,
      default() {
        return "linexy";
      },
    },
  },
  data() {
    return {
      myChart: null,
    };
  },
  computed: {},
  mounted() {
    this.init();
    // window.onresize = () => {
    //   myChart.resize()
    // }
  },
  methods: {
    init() {
      this.myChart = echarts.init(document.getElementById(this.eId));
      this.myChart.showLoading();
      axios({ methods: "get", url: "./130000.geoJson" }).then((res) => {
        this.myChart.hideLoading();
        echarts.registerMap("HB", res.data);
        this.myChart.setOption({
          title: {
            text: this.dataSource.title,
          },
          tooltip: {
            trigger: "item",
            formatter: "{a}<br/>{b}:{c}",
          },
          visualMap: {
            min: Math.min(...this.dataSource.data.map(item=>item.value)),
            max: Math.max(...this.dataSource.data.map(item=>item.value)),
            text: ["高", "低"],
            realtime: false,
            calculable: true,
            inRange: {
              color:this.dataSource.colors
            },
            right:40
          },
          series: [
            {
              name: this.dataSource.name,
              type: "map",
              map: "HB",
              label: {
                show: true,
              },
              data: this.dataSource.data,
              // // 自定义名称映射
              // nameMap: {
              //   "Central and Western": "中西区",
              //   Eastern: "东区",
              //   Islands: "离岛",
              //   "Kowloon City": "九龙城",
              //   "Kwai Tsing": "葵青",
              //   "Kwun Tong": "观塘",
              //   North: "北区",
              //   "Sai Kung": "西贡",
              //   "Sha Tin": "沙田",
              //   "Sham Shui Po": "深水埗",
              //   Southern: "南区",
              //   "Tai Po": "大埔",
              //   "Tsuen Wan": "荃湾",
              //   "Tuen Mun": "屯门",
              //   "Wan Chai": "湾仔",
              //   "Wong Tai Sin": "黄大仙",
              //   "Yau Tsim Mong": "油尖旺",
              //   "Yuen Long": "元朗",
              // },
            },
          ],
        });
      });

      let that = this;
      setTimeout(() => {
        that.myChart.resize();
      }, 200);
      window.addEventListener("resize", () => {
        setTimeout(() => {
          that.myChart.resize();
        }, 200);
      });
    },
  },
  watch: {
    dataSource() {
      console.log(this.dataSource)
      this.init();
    },
  },
};
</script>